<template>
    <el-container class="home-container">
      <el-header>
        <div>电商后台管理系统</div>
        <div><router-link class="goshop" to="./userlogin">前往KM数码商城</router-link> </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px" >
          <el-menu default-active="user" router text-color="#fff" background-color="#545c64" >
            <el-menu-item index="user">
              <template #title>
                 <el-icon><UserFilled /></el-icon>
                <span>用户列表</span>
              </template>
            </el-menu-item>
            <el-menu-item index="order">
              <el-icon>
                <el-icon><List /></el-icon>
              </el-icon><span>订单列表</span>
            </el-menu-item>
            <el-menu-item index="items">
              <el-icon>
                <el-icon><Goods /></el-icon>
              </el-icon><span>商品列表</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  name: 'Home',
}
</script>
<style>
.home-container{
  height: 100%;
}
.el-header {
  background-color: #373741;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.el-header .goshop{
  color: blue;
}
.el-aside {
  background-color: #545c64;
 }

.el-menu{
  border-right: none;
  color:#fff;
}
.el-main {
  background-color: #eaedf1;
}
</style>
